<template>
  <div>
      <label v-for="menu in data" :key="menu.id">
        <el-submenu v-if="menu.items && menu.items.length > 0" :index="menu.id">
            <template slot="title">
              <div v-if="menu.isEditing" @click.stop>
                <el-input
                  style="width:200px;"
                  v-model="menu.name"
                  v-focus
                  :ref='"edit-input-" + menu.id'
                  @keyup.enter.native="onKeyup"
                  @blur="saveEdit(menu)"
                ></el-input>
              </div>
              <div v-else>
                <div class="el-submenu-button" @click.stop>
                  <SubMenuButton :menu="menu" v-bind="$attrs" v-on="$listeners"/>
                </div>
                <span><i class="el-icon-folder"></i>{{menu.name}}</span>
              </div>
            </template>
            <label>
              <NavMenu :data="menu.items" v-bind="$attrs" v-on="$listeners"></NavMenu>
            </label>
        </el-submenu>
        <el-menu-item v-else :index="menu.id">
          <span slot="title" v-if="menu.isEditing" @click.stop>
            <el-input
              style="width:200px;"
              v-model="menu.name"
              v-focus
              :ref='"edit-input-" + menu.id'
              @keyup.enter.native="onKeyup"
              @blur="saveEdit(menu)"></el-input>
          </span>
          <span slot="title" v-else style="width:100%; display: block;" @dblclick="onDbClick(menu)">
            <i v-if="menu.type==-1" class="el-icon-folder"></i>
            <i v-else class="el-icon-s-promotion"></i>
            {{menu.name}}
          </span>
          <div class="el-submenu-button" @click.stop>
            <SubMenuButton
              :menu="menu"
              v-bind="$attrs"
              v-on="$listeners" />
          </div>
        </el-menu-item>
      </label>
  </div>
</template>

<style scope>
  .el-submenu__title{
    font-size: small;
    padding-left: 2px;
  }

  .el-submenu__icon-arrow {
    right: unset;
    left: 0px;
  }

  .el-submenu-button{
    position: absolute;
    right: 20px;
  }
</style>

<script>
import { save } from '../api/directory'
import NavMenu from "./NavMenu.vue";
import SubMenuButton from "./SubMenuButton"
import { EventBus } from "@/utils/event-bus";

export default {
  name: "NavMenu",
  data() {
    return { };
  },
  components: {
    NavMenu,
    SubMenuButton
  },
  props: ["data"],
  mounted() { },
  methods: {
    onDbClick(request) {
      // 如果不是文件夹
      if(request.type != -1){
        EventBus.$emit("openRequest", {
          id: request.id,
          name: request.name,
          parentId: request.parentId,
          isNew: false
        });
      }
    },
    saveEdit(menu){
      let that = this
      if(menu.name == null || menu.name == ''){
        this.$message.error('请填入文件名')
        this.restore(menu)
        return
      }
      if(menu.isEditing){
        save(menu)
          .then(response =>{
            menu.id = response.data
            menu.isEditing = false
          })
          .catch(response => {
            this.restore(menu)
          })
      }
    },
    restore(menu){
      if(menu.id || menu.id !== ''){
        // edit
        menu.name = menu.originalName
        menu.isEditing = false
      }
      else{
        // new
        this.data.pop()
      }
    },
    onKeyup(e){
      e.target.blur()
    }
  },
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector("input").focus();
      }
    }
  },
};
</script>
